<template>
  <div class="mod-config">
    <el-dialog
      :visible.sync="showGraph"
      @open="openShow"
      @close="closeShow"
      width="90%">
      <div style="height: 100%;height: 700px;">
        <showTolograph @showDialog="showFlag" ref="showPage"></showTolograph>
      </div>
    </el-dialog>


    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="请输入安全拓扑ID" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button v-if="isAuth('generator:securityservicechain:save')" type="primary"
                   @click="addOrUpdateAnTopology(0, 'xinzeng')">新增
        </el-button>
        <!-- <el-button v-if="isAuth('generator:securityservicechain:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
      </el-form-item>
    </el-form>


    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <!-- <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="endDomainId"
        header-align="center"
        align="center"
        label="安全拓扑序列ID">
      </el-table-column> -->
      <el-table-column
        prop="orderId"
        header-align="center"
        align="center"
        label="安全拓扑ID">
      </el-table-column>
      <el-table-column
        prop="orderName"
        header-align="center"
        align="center"
        label="安全服务拓扑名称">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        header-align="center"
        align="center"
        label="创建时间">
      </el-table-column>
      <!--      prop="state"-->
      <el-table-column

        header-align="center"
        align="center"
        label="执行状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state=='ACTIVE'">{{scope.row.state}}</span>
          <div v-else-if="scope.row.state=='PENDING'" class="parentbox">
            <!--            <div class=" ">-->
            <img src="../../../assets/img/element/loading.jpg" height="20" width="180" left="0"
                 class="anipos"/>
            <!--            </div>-->
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="userName"
        header-align="center"
        align="center"
        label="用户名称">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="queryAnTopology(scope.row.orderId, 'xiangqing')">详情</el-button>
          <el-button type="text" v-if="scope.row.state === ''" size="small"
                     @click="addOrUpdateAnTopology(scope.row.orderId, 'xiugai')">编辑
          </el-button>
          <el-button type="text" v-if="scope.row.state === ''" size="small"
                     @click="deleteHandle(scope.row.orderId, 'delete')">删除
          </el-button>

          <el-button type="text" v-if="scope.row.state === 'ACTIVE'" size="small"
                     @click="safeDeviceList(scope.row.orderId)">配置
          </el-button>
          <!-- <el-button type="text" size="small" @click="deleteHandle(scope.row.sscId)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
    <my-work v-if="addOrUpdateVisible" @addVisible="addVisible" @shutDown="shutDown" ref="addOrUpdate"
             @refreshDataList="getDataList"></my-work>
    <!-- 弹窗, 新增 / 修改 -->
    <safe-device-details v-if="safeDeviceDetailsVisible" ref="safeDevice"></safe-device-details>
  </div>
</template>

<script>
    import AddOrUpdate from './securityservicechain-add-or-update'
    import myWork from './securityTopology/mywork'
    import safeDeviceDetails from './safeDevicedetails'
    import showTolograph from './showTopology'

    export default {
        data() {
            return {
                dataForm: {
                    key: ''
                },
                showGraph: false,
                showData: {
                    typeId: 0,
                    isEdit: 1
                },
                timer: null,
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                safeDeviceDetailsVisible: false
            }
        },
        components: {
            AddOrUpdate,
            myWork,
            safeDeviceDetails,
            showTolograph
        },
        activated() {
            this.getDataList()
        },
        mounted() {
            this.getDataList()
            this.timer = setInterval(() => {
                this.getDataList()
            }, 40000)
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
            }
        },
        watch: {
            showGraph(val) {
              if(!val){
                  this.getDataList()
              }
            }
        },
        methods: {
            showFlag(f) {
                this.showGraph = f
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                let obj = {}
                this.$http({
                    url: this.$http.adornUrl('/order/queryOrderList'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'page': this.pageIndex,
                        'limit': this.pageSize,
                        'order': this.dataForm.key
                    })
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list
                        this.totalPage = data.page.totalCount
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            addVisible(val) {  // 关闭弹出框
                this.addOrUpdateVisible = val
            },
            shutDown(val) { // 关闭弹出框重新请求接口
                this.getDataList()
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            openShow() {
                this.$nextTick(() => {
                    this.$refs.showPage.initShow(this.showData)
                })
            },
            closeShow() {
                // this.$nextTick(() => {
                //     this.$refs.showPage.source = null
                // })
            },
            // 查询
            queryAnTopology(val, details) {
                // this.$router.push({path: '/generator-showTopology', query: {id: val, isEdit:0}})
                this.showData = {
                    typeId: val,
                    isEdit: 0
                },
                    this.showGraph = true
                return
                // if (val) {
                //     this.addOrUpdateVisible = true
                //     this.$nextTick(() => {
                //         this.$refs.addOrUpdate.init(val, details)
                //     })
                // }
            },
            //查询网元设备状态跳转到外部系统
            safeDeviceList(id) {
                this.safeDeviceDetailsVisible = true
                this.$nextTick(() => {
                    this.$refs.safeDevice.init(id)
                })
            },
            // 新增 / 修改
            addOrUpdateAnTopology(val, details) {
                // this.$router.push({path: '/generator-showTopology', query: {id: val, isEdit:1}})
                this.showData = {
                    typeId: val,
                    isEdit: 1
                }
                this.showGraph = true
                return
                // this.addOrUpdateVisible = true
                // this.$nextTick(() => {
                //     this.$refs.addOrUpdate.init(val, details)
                // })
            },
            // 删除
            deleteHandle(id) {
                var ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.sscId
                })
                this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl(`/order/deleteOrder/${id}`),
                        method: 'post',
                        // data: this.$http.adornData(ids, false)
                    }).then(({data}) => {
                        if (data.code === 0) {
                            this.getDataList()
                        } else {
                            this.$message({
                                showClose: false,
                                message: data.msg,
                                type: 'warning'
                            })
                        }
                    })
                })
            }
        }
    }
</script>
<style scoped>
  .parentbox {
    display: inline-block;
    position: absolute;
    width: 89px;
    top: 24px;
    margin-left: -45px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    border-radius: 5px;
  }

  @keyframes move {
    0% {
      left: -50%;
    }
    50% {
      left: -25%;
    }
    100% {
      left: -2%;
    }
  }

  .anipos {
    position: absolute;
    left: 0;
    top: 0;
    animation: move 3s infinite;
  }

</style>
